<template>
  <div>
    <div :class="gettype(type)" class="report">
      <img class="warring" src="@/assets/images/water/warring.png" />
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineProps, defineEmits, defineExpose } from "vue";
onMounted(() => {});
defineProps({
  type: {
    type: String,
    default: ""
  }
});
const gettype = (type: string) => {
  if (type == "报警") {
    return "red";
  }
  if (type == "正常") {
    return "green";
  }
  if (type == "预警") {
    return "yellow";
  }
};
</script>
<style lang="scss" scoped>
.report {
  position: relative;
  width: 36px;
  height: 36px;

  .warring {
    position: absolute;
    top: 12px;
    left: 13px;
    width: 10px;
    height: 10px;
  }
}

.red {
  animation: red;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.yellow {
  animation: yellow;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

.green {
  animation: green;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes red {
  0% {
    background: url("@/assets/images/floornum/colour/red/01.png");
    background-size: 100%;
  }

  50% {
    background: url("@/assets/images/floornum/colour/red/02.png");
    background-size: 100%;
  }

  100% {
    background: url("@/assets/images/floornum/colour/red/03.png");
    background-size: 100%;
  }
}

@keyframes yellow {
  0% {
    background: url("@/assets/images/floornum/colour/yellow/01.png");
  }

  50% {
    background: url("@/assets/images/floornum/colour/yellow/02.png");
  }

  100% {
    background: url("@/assets/images/floornum/colour/yellow/03.png");
  }
}

@keyframes green {
  0% {
    background: url("@/assets/images/floornum/colour/green/01.png");
  }

  50% {
    background: url("@/assets/images/floornum/colour/green/02.png");
  }

  100% {
    background: url("@/assets/images/floornum/colour/green/03.png");
  }
}
</style>
